<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

    </style>

</head>
<body>
<img src="../images/owl-login.png" width="50" style="position: relative;top: 15px" alt="">
<div style="position: relative;left: 50px;bottom:10px;color: black;font-weight: 900;font-family: 幼圆 ">猫头鹰图书管理</div>
<div id="app" style="position: relative;top: 10px">
    <!--搜索表单-->

    <el-form :inline="true" :model="findbook" class="demo-form-inline">

        <el-form-item label="图书名称">
            <el-input v-model="findbook.bookName" placeholder="图书名称"></el-input>
        </el-form-item>

        <el-form-item label="作者名称">
            <el-input v-model="findbook.writerName" placeholder="作者名称"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="getPage()">查询</el-button>
        </el-form-item>
    </el-form>

    <!--按钮-->

    <el-row>

        <el-button type="danger" plain @click="deletebyIds()" >批量删除</el-button>
        <el-button type="primary" plain @click="resetform()">新增</el-button>

    </el-row>
    <!--添加数据对话框表单-->
    <el-dialog
            title="添加图书"
            :visible.sync="dialogVisible"
            width="30%"
    >

        <el-form ref="form" :model="book" label-width="80px">
            <el-form-item label="图书类型">
                <el-input v-model="book.type"></el-input>
            </el-form-item>

            <el-form-item label="图书名称">
                <el-input v-model="book.name"></el-input>
            </el-form-item>
            <el-form-item label="作者名称">
                <el-input v-model="book.writter"></el-input>
            </el-form-item>
            <el-form-item label="数量">
                <el-input v-model="book.count"></el-input>
            </el-form-item>

            <el-form-item label="简介">
                <el-input type="textarea" v-model="book.description"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="addBook()">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <!--修改数据对话框表单-->
    <el-dialog
            title="修改图书"
            :visible.sync="dialogVisiblebyupdate"
            width="30%"
    >

        <el-form ref="form" :model="book" label-width="80px">
            <el-form-item label="图书类型">
                <el-input v-model="book.type"></el-input>
            </el-form-item>

            <el-form-item label="图书名称">
                <el-input v-model="book.name"></el-input>
            </el-form-item>
            <el-form-item label="作者名称">
                <el-input v-model="book.writter"></el-input>
            </el-form-item>
            <el-form-item label="数量">
                <el-input v-model="book.count">

                </el-input>
            </el-form-item>

            <el-form-item label="简介">
                <el-input type="textarea" v-model="book.description"></el-input>
            </el-form-item>
            <!--            <template slot-scope="scope">-->
            <el-form-item>
                <el-button type="primary" @click="updateBook()">提交</el-button>
                <el-button @click="dialogVisiblebyupdate = false">取消</el-button>
            </el-form-item>
            <!--            </template>-->
        </el-form>

    </el-dialog>


    <!--表格-->
    <template>
        <el-table
                :data="booksData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange"
                current-row-key="id"
                stripe highlight-current-row
        >
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    label="序号"
                    width="50">
            </el-table-column>

            <el-table-column
                    prop="type"
                    label="图书类型"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="图书名称"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="writter"
                    align="center"
                    label="作者名称"
            >
            </el-table-column>
            <el-table-column
                    prop="description"
                    align="center"
                    label="简介"
                    width="400"
            >
            </el-table-column>
            <el-table-column
                    prop="count"
                    align="center"
                    label="数量"
                    width="80">
            </el-table-column>

            <el-table-column
                    align="center"
                    label="操作">

                <template slot-scope="scope">

                    <el-button type="primary" @click="databack(scope.row)">编辑</el-button>

                    <el-button type="danger" @click="deletebook(scope.row)">删除</el-button>

                </template>

            </el-table-column>

        </el-table>
    </template>

    <!--分页工具条-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagesizes"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts">
    </el-pagination>

</div>


<script src="../js/vue.js"></script>
<script src="../elementui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="../elementui/lib/theme-chalk/index.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {

            // currentPage: 4,
            // 添加数据对话框是否展示的标记
            dialogVisible: false,
            dialogVisiblebyupdate: false,
            // 品牌模型数据
            findbook: {
                bookName: '',
                writerName: ''
            },
            // 当前页码
            page: 1,
            //每页显示的条目数
            pagesizes: 5,
            //书籍总数
            counts: 0,
            //一本书的数据
            book: {},
            // 复选框选中数据集合
            multipleSelection: [],
            // 全部书的表格数据
            booksData: []

        },
        mounted() {
            //页面加载之后的方法
            this.getPage();
        },
        methods: {
            resetform() {
                this.book = {};
                this.dialogVisible = true;
            },
            /*删除书籍*/
            deletebook(row) {
                this.$confirm("此操作将永久删除数据，是否继续", "删除界面", {}).then(() => {
                    axios.delete("http://localhost/books/" + row.id).then((res) => {
                        if (res.data.code === 501) {
                            this.$message.success("删除成功")
                        } else if (res.data.code===500){
                            this.$message.error(res.data.msg)
                        }else {
                            window.location.href = '/pages/log.html'
                        }
                    }).finally(() => {
                        this.getPage();
                    });
                }).catch(() => {
                    this.$message.info("取消删除")
                });
            },
            /*回显书籍*/
            databack(row) {
                axios.get("http://localhost/books/" + row.id).then((res) => {
                    this.book = res.data.data;
                    this.dialogVisiblebyupdate = true;
                });
            },
            deletebyIds(){
                this.$confirm("此操作将永久删除数据，是否继续", "删除界面", {}).then(() => {
                    axios.put("http://localhost/books/deletebyIds" ,this.multipleSelection).then((res) => {
                        if (res.data.code === 501) {
                            this.$message.success("删除成功")
                        } else {
                            this.$message.error(res.data.msg)
                        }
                    }).finally(() => {
                        this.getPage();
                    });
                }).catch(() => {
                    this.$message.info("取消删除")
                });
            },
            /*更新书籍*/
            updateBook() {
                axios.put("http://localhost/books", this.book).then((res) => {
                    if (res.data.code === 401) {
                        this.dialogVisiblebyupdate = false;
                        this.$message.success("修改成功")
                    } else if (res.data.code === 400) {
                        this.$message.error("添加失败,数据格式有误")
                    }else {
                        window.location.href = '/pages/log.html'
                    }
                }).finally(() => {
                    this.getPage();
                });
            },
            /*查询所有book 不需要了*/
            getAll() {
                axios.get("http://localhost/books").then((res) => {
                    console.log(res.data.data)
                    this.tableData = res.data.data;
                });
            },
            getallcounts(){
                axios.get("http://localhost/books/getcount/name="+this.findbook.bookName+"&writter="+this.findbook.writerName).then((res)=>{
                        this.counts=res.data;
                })
            },
            /*添加书籍*/
            addBook() {
                axios.post("http://localhost/books", this.book).then((res) => {
                    if (res.data.code === 601) {
                        this.dialogVisible = false;
                        this.$message.success("添加成功！")
                    } else if (res.data.code === 600) {
                        this.$message.error(res.data.msg);
                    } else {
                        this.$message.error("添加失败,数据格式有误")
                    }
                }).finally(() => {
                    this.getPage();
                });
            },
            /*颜色*/
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 4 === 2) {
                    return 'warning-row';
                } else if (rowIndex % 4 === 0) {
                    return 'success-row';
                }
                return '';
            },
            // 复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
            // 查询书籍方法
            onSubmit() {
                axios.post("http://localhost/books/")
                console.log(this.brand);
            },
            //分页查询
            getPage(){
                axios.get("http://localhost/books/page/"+"name="+this.findbook.bookName+"&writter="+this.findbook.writerName+
                "/page="+this.page+"&pagesizes="+this.pagesizes)
                    .then((res)=>{
                            if (res.data.code===101){
                                this.getallcounts();
                                this.booksData=res.data.data;
                            }else {
                                window.location.href = '/pages/log.html'
                            }
                    })
            },
            //分页
            handleSizeChange(val) {
                this.pagesizes=val;
                this.getPage();
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.page=val;
                this.getPage();
                console.log(`当前页: ${val}`);
            }

        },
    })

</script>

</body>
</html>